<script setup lang="ts">
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
import { ElLink, ElDivider } from 'element-plus'

const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
</script>

<template>
  <div>
    <p class="text-gray-600 mb-6">以下是一些帮助您开始使用 Vue 3 开发的资源和信息。</p>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <WelcomeItem>
        <template #icon>
          <DocumentationIcon />
        </template>
        <template #heading>文档</template>

        Vue 的
        <el-link type="primary" href="https://vuejs.org/" target="_blank" rel="noopener"
          >官方文档</el-link
        >
        提供了您开始所需的所有信息。
      </WelcomeItem>

      <WelcomeItem>
        <template #icon>
          <ToolingIcon />
        </template>
        <template #heading>工具链</template>

        本项目使用
        <el-link
          type="primary"
          href="https://vite.dev/guide/features.html"
          target="_blank"
          rel="noopener"
          >Vite</el-link
        >进行构建。推荐的 IDE 设置是
        <el-link type="primary" href="https://code.visualstudio.com/" target="_blank" rel="noopener"
          >VSCode</el-link
        >
        +
        <el-link
          type="primary"
          href="https://github.com/vuejs/language-tools"
          target="_blank"
          rel="noopener"
          >Vue - Official</el-link
        >。如果您需要测试组件和网页，请查看
        <el-link type="primary" href="https://vitest.dev/" target="_blank" rel="noopener"
          >Vitest</el-link
        >
        和
        <el-link type="primary" href="https://www.cypress.io/" target="_blank" rel="noopener"
          >Cypress</el-link
        >
        /
        <el-link type="primary" href="https://playwright.dev/" target="_blank" rel="noopener"
          >Playwright</el-link
        >

        <div class="mt-2">
          更多说明请参阅
          <el-link type="primary" href="javascript:void(0)" @click="openReadmeInEditor"
            ><code>README.md</code></el-link
          >。
        </div>
      </WelcomeItem>

      <WelcomeItem>
        <template #icon>
          <EcosystemIcon />
        </template>
        <template #heading>生态系统</template>

        获取项目的官方工具和库：
        <el-link type="primary" href="https://pinia.vuejs.org/" target="_blank" rel="noopener"
          >Pinia</el-link
        >、
        <el-link type="primary" href="https://router.vuejs.org/" target="_blank" rel="noopener"
          >Vue Router</el-link
        >、
        <el-link type="primary" href="https://test-utils.vuejs.org/" target="_blank" rel="noopener"
          >Vue Test Utils</el-link
        >和
        <el-link
          type="primary"
          href="https://github.com/vuejs/devtools"
          target="_blank"
          rel="noopener"
          >Vue Dev Tools</el-link
        >。如果您需要更多资源，我们建议访问
        <el-link
          type="primary"
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
          rel="noopener"
          >Awesome Vue</el-link
        >。
      </WelcomeItem>

      <WelcomeItem>
        <template #icon>
          <CommunityIcon />
        </template>
        <template #heading>社区</template>

        遇到困难？在
        <el-link type="primary" href="https://chat.vuejs.org" target="_blank" rel="noopener"
          >Vue Land</el-link
        >
        （我们的官方 Discord 服务器）或
        <el-link
          type="primary"
          href="https://stackoverflow.com/questions/tagged/vue.js"
          target="_blank"
          rel="noopener"
          >StackOverflow</el-link
        >上提问。您还应该关注官方
        <el-link
          type="primary"
          href="https://bsky.app/profile/vuejs.org"
          target="_blank"
          rel="noopener"
          >@vuejs.org</el-link
        >
        Bluesky 账号或
        <el-link type="primary" href="https://x.com/vuejs" target="_blank" rel="noopener"
          >@vuejs</el-link
        >
        X 账号，获取 Vue 世界的最新消息。
      </WelcomeItem>
    </div>

    <el-divider class="my-6" />

    <WelcomeItem>
      <template #icon>
        <SupportIcon />
      </template>
      <template #heading>支持 Vue</template>

      作为一个独立项目，Vue 依靠社区支持来保持可持续发展。您可以通过
      <el-link type="primary" href="https://vuejs.org/sponsor/" target="_blank" rel="noopener"
        >成为赞助商</el-link
      >来帮助我们。
    </WelcomeItem>
  </div>
</template>
